<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>自助缴费助手</title>

    <link rel="stylesheet" href="../css/weui.css"/>
    <link rel="stylesheet" href="../css/example.css"/>
    <link rel="stylesheet" href="../css/plate.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <style>
    html,body{
            font-family: 'PingFangSC-Regular';
            width: 100%;
            height: 99%;
            background : #F5F5F9;
            color: rgba(51, 51, 51, 0.87);
            margin : 0;
            overflow-y: auto;
    }
    .weui-tab{
        height: 14vh;
        background-color: blue;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .page__hd{
        padding: 0px;
    }
    .car{
        width: 30px;
    }
    .weui-cells{
        margin-top: 0px;
    }
    .weui-cell{
        display: flex;
        align-items: center;
    }
    .weui-cells>.weui-cell>p{
        color: #333333;
    }

    .weui-btn:after{
        border: none;
    }
    .hhead{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wechatpay{
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }

    .parking_name{
        color: black;
        font-weight: 500;
        margin: 0px 6px 0px 6px;
    }

   .temp_parking{
        color: white;
        font-size: 10px;
        background-color: #00b4bb;
        padding: 3px 7px 3px 7px;
        margin-left: 4px;
        border-radius: 6px;
    }

    .total_money{
        font-size: 20px;
        color: #0051bc;
        margin:0px 4px 0px 4px;
        font-weight: 600;
    }
    .ffooter{
        display: flex;
        align-items: center;
    }

    .wechat_pay{
        display: flex;
        align-items: center;
    }

    .gopay{
        background-color: #0051bc;
        color: white;
    }

    .disabled_pay{
        background-color: #F5F5F9;
        color: white;
    }
    #cancel{
        color: #bababa;
        background-color: #F5F5F9;
        border:1px solid #c4c4c4;
    }
    .weui-btn_disabled{
        border-radius: 6px;
    }



    </style>
</head>
<body>
        <div id="main" >
        <div class="weui-cells" style="margin-top: 0px;">
            <div class="weui-cell hhead">
                    <img class="car" src="../images/car@2x.png" alt=""> 
                    <span id="car_num" class="parking_name">苏A12345</span>
                    <span class="temp_parking">临停车</span>
            </div>
        </div>

        <div class="weui-cells" style="margin-top: 10px;">
            <div class="weui-cell borderbottom">
                <div class="weui-cell__bd">
                    <p>进场时间</p>
                </div>
                <div class="weui-cell__ft" id="intime"></div>
            </div>
            <div class="weui-cell borderbottom">
                <div class="weui-cell__bd">
                    <p>停车时长</p>
                </div>
                <div class="weui-cell__ft"><span id="duration"></span></div>
            </div>
            
            <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p>应付停车费</p>
                    </div>
                    <div class="weui-cell__ft ffooter">
                        <span id="actual_money" class="total_money">21</span>
                        元
                    </div>
            </div>

            <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p>储值卡余额</p>
                    </div>
                    <div class="weui-cell__ft ffooter">
                        <span id="discount_price" class="total_money" style="color: #be0002">7</span>
                        元
                    </div>
            </div>

            <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p>应付停车费</p>
                    </div>
                    <div class="weui-cell__ft ffooter">
                        <span id="paymoney" class="total_money"></span>
                        元
                    </div>
            </div>
        </div>

    
        <div class="weui-cells" style="margin-top: 10px;">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>支付金额</p>
                </div>
                <div class="weui-cell__ft wechat_pay">
                    <img class="wechatpay" src="../images/wechat_payment@2x.png" alt="">
                    <span class="unit">微信支付</span>
                </div>
            </div>
        </div>

        <div class="page__bd page__bd_spacing" style="margin-top: 45px;">
            <a id="gopay" class="weui-btn weui-btn_primary weui-btn_disabled">支付</a>
            <a id="cancel"  class="weui-btn weui-btn_primary weui-btn_disabled">取消</a>

            <!-- <div class="weui-footer weui-footer_fixed-bottom">
                <p>请于<span id="leave_time">15</span>分钟内完成付款并离场，超时将加收停车费</p>
                <div>
                    <p>本服务由江苏慧泽提供</p>
                    <p>联系电话:<a href="tel:4009015600">400-901-5600</a></p>
                </div>
            </div> -->
        </div>
      
<script src="../js/jquery-1.11.3.min.js"></script>
 <script>
    $(function(){
            var car = window.location.href;
            var cardata = car.split("="); //截取 url中的“=”,获得“=”后面的参数  
            var car_num = decodeURI(cardata[1]); //decodeURI解码  
            console.log(car_num);
            $('#car_num').html(car_num);

            $('#gopay').click(function(){
                window.location.href = 'money_car.html?car_num='+car_num;
            })
         })

        var act_money = $("#actual_money").html();
        var dis_price = $("#discount_price").html();
        var actual_money = parseInt(act_money);
        var discount_price = parseInt(dis_price);
        console.log(actual_money);
        var pay_money = actual_money - discount_price;
        if(pay_money >= 0)
        {
            $("#paymoney").html(pay_money);
            
        }
        else{

        }
  
 </script>
</body>
</html>